<template>
  <d2-container>
    <el-form :inline="true" :model="form" ref="search" :rules="rules" size="mini">
      <el-form-item label="内容" prop="content">
        <el-input placeholder="用户ID/手机号/用户名" v-model="form.content" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select style="width: 100px" placeholder v-model="form.type">
          <el-option label="用户ID" value="id"></el-option>
          <el-option label="手机号" value="phone"></el-option>
          <el-option label="用户名" value="username"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <div v-if="tableData != null">
      <el-table :data="tableData" empty-text="未查询到相关记录~" style="width: 100%" max-height="800">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand" label-width="50px">
              <el-form-item label="头像" style="width: 100%">
                <el-popover trigger="hover" placement="top">
                  <el-image
                    class="amplification"
                    :src="imageUrl(props.row.info.avatar)"
                    fit="cover"
                  />
                  <el-image class="thumbnail" :src="imageUrl(props.row.info.avatar)" fit="cover" slot="reference"/>
                </el-popover>
              </el-form-item>
              <el-form-item label="昵称" style="width: 30%">{{ props.row.info.nick_name }}</el-form-item>
              <el-form-item label="性别" style="width: 30%">{{ sex[props.row.info.sex] }}</el-form-item>
              <el-form-item label="生日" style="width: 30%">{{ props.row.info.birthday }}</el-form-item>
              <el-form-item label="签名" style="width: 100%">{{ props.row.info.sign }}</el-form-item>
              <el-form-item label="学号" style="width: 30%">{{ props.row.info.stu_id }}</el-form-item>
              <el-form-item label="学院" style="width: 30%">{{ props.row.info.college }}</el-form-item>
              <el-form-item label="学校" style="width: 30%">{{ props.row.info.school }}</el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="用户ID" prop="user.id"/>
        <el-table-column width="150px" label="用户名" prop="user.username"/>
        <el-table-column width="150px" label="手机号" prop="user.phone"/>
        <el-table-column label="权限控制" fixed="right" class="switch-list">
          <template slot-scope="props">
            <el-switch
              class="switch-list-item"
              @change="(v) => {swtichChange(props.$index, 'publish', v)}"
              v-model="props.row.state.publish"
              active-text="发布权限"
              active-color="#13ce66"
            />
            <el-switch
              class="switch-list-item"
              @change="(v) => {swtichChange(props.$index, 'buy', v)}"
              v-model="props.row.state.buy"
              active-text="购买权限"
              active-color="#13ce66"
            />
            <el-switch
              class="switch-list-item"
              @change="(v) => {swtichChange(props.$index, 'comment', v)}"
              v-model="props.row.state.comment"
              active-text="评论权限"
              active-color="#13ce66"
            />
            <el-switch
              class="switch-list-item"
              @change="(v) => {swtichChange(props.$index, 'login', v)}"
              v-model="props.row.state.login"
              active-text="登录权限"
              inactive-color="#f44336" 
              active-color="#13ce66" 
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </d2-container>
</template>

<script>
import axios from "@/plugin/axios";
import qs from "qs";

export default {
  data() {
    var validateContent = (rule, value, callback) => {
      switch (this.form.type) {
        case "id":
          {
            if (value == "") {
              callback(new Error("请输入记录ID"));
            } else {
              if (Number.isNaN(Number(value))) {
                callback(new Error("请输入数字值"));
              } else {
                callback();
              }
            }
          }
          break;
        case "username":
          {
            if (value === "") {
              callback(new Error("请输入用户名"));
            } else {
              callback();
            }
          }
          break;
      }
    };
    return {
      form: {
        content: "dyf31fbd68",
        type: "username"
      },
      rules: {
        content: [{ validator: validateContent, trigger: "blur" }]
      },
      tableData: null,
      sex: ["未知", "男", "女"]
    };
  },
  methods: {
    query() {
      this.$refs["search"].validate(valid => {
        if (valid) {
          axios
            .post(
              "/admin/queryUser",
              qs.stringify({
                content: this.form.content,
                type: this.form.type
              })
            )
            .then(data => {
              console.log(data);
              this.tableData = data;
            });
        }
      });
    },
    imageUrl(path) {
      return `${process.env.VUE_APP_API}${path}`;
    },
    swtichChange(index, which, value) {
      // console.log(`${this.tableData[index].user.id} -- ${which}:${value}`)
      axios
        .post(
          "/admin/modifyPermission",
          qs.stringify({
            userId: this.tableData[index].user.id,
            permission: which,
            value: value
          })
        )
        .then(data => {
          this.tableData[index].state[which] = value;
        });
    }
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.switch-list-item {
  margin-right: 30px;
}
.thumbnail {
  width: 50px;
  height: 50px;
}
.amplification {
  width: 150px;
  height: 150px;
}
</style>

